@import "public.less";
/*header-nav*/

@media screen and(max-width: 767px){
  header{
    position: relative;
    height: 40px!important;
      ul.nav-show{
        display: flex!important;
      }
      ul.nav-hide{
        display: none!important;
      }
      ul.more{
        position: absolute;
        display: flex!important;
        flex-flow: row nowrap;
        justify-content: flex-start;
        height: 100%;
        width: auto;
        right: 0;
        li{
          display: inline-block;
          height: 36px;
          width: 36px;
          margin: auto 12px;
          i.iconfont{
            display: block;
            font-size: 24px;
            color: #009a61;
            line-height: 36px;
            text-align: center;
            margin:auto;
          }
          &:hover{
            background-color: #eee;
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
      ul.nav{
        position: absolute;
        flex-flow: column nowrap!important;
        background-color: #fff;
        height: auto!important;
        width: 186px;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        top: 38px;
        right: 12px;
        display: none;
        li{
          font-size: 14px!important;
          width: 100%!important;
        }
      }
    }
}
@media screen and(min-width: 768px){
  header{
    ul.nav{
      width: 750px;
      li{

      }
    }
  }
}

@media screen and(min-width: 992px){
  header{
    ul.nav{
      width: 940px;
      li{

      }
    }
  }
}
@media screen and(min-width: 1200px) {
  header{
    ul.nav{
      width: 1140px;
    }
  }
}
header{
  position: relative;
  border-top: 3px solid #009a61;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.1);
  background: #fafafa;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 60px;
  .transition(@property: height;@duration: .1s);
  ul.more{
    display: none;
  }
  ul.nav{
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    height: 100%;
    li{
      display: inline-block;
      font-size: 16px;
      height: 34px;
      width: 60px;
      text-align: center;
      line-height: 34px;
      margin: auto;
      border-radius: 4px;
      &:hover{
        background-color: #eee;
      }
      a{
        color: #757575;
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }
    //TODO
    }
}
.select{
  a{
    color: #009a61!important;
    font-weight: 600;
  }
}
/*iframe*/
iframe{
  display: block;
  border: none;
  width: 80%;
  height: 80vh;
  margin: 20px auto;
}
/*pic*/
.block_box{
  clear: both;
  width: auto;
  margin: 0 auto;
  ul{
    li{
      float: left;
      margin-left: 6px;
      img{
        width: 340px;
        height: 306px;
      }
      a{
        overflow: hidden;
        position: relative;
        display: block;
        width: 137px;
        height: 306px;
        -webkit-transition: width .5s;
        transition: width .5s;
      }
      a.hover{
        color: #ff5d3d;
        text-decoration: none;
      }
      span{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 306px;
        font-size: 14px;
      }
      span.txt{
        z-index: 20;
        width: 92%;
        height: 246px;
        padding: 30px 4%;
        color: #fff;
      }
      span.out_bg{
        opacity: .3;
        background: #000;
        filter: alpha(opacity=30);
      }
      h3{
        position: relative;
        height: 34px;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 700;
        line-height: 30px;
        border-bottom: 1px solid #fff;
      }

    }

    li.active{
      a{
        width: 330px;
      }
      span.out_bg{
        background: none;
      }
    }
    li.last{
      margin: 0;
    }
  }
}
.custon-list{
  li{
    display: block;
    background-color: #eee;
    margin: 2px 0;
    height: 30px;
    color: #333;
  }
}
/*chat*/
@chat-bg-color:#9eea6a;
.chat-wrap{
  width: 550px;
  height: 640px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 3px;
  .header{
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    .name{
      line-height: 60px;
      margin: 0;
      text-indent: 20px;
      font-weight: normal;
    }
  }
  .info-box{
    height: 430px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    background-color: rgb(245, 245, 245);
    overflow-Y: scroll;
    overflow-x: hidden;
    .scrollbar;
    li.dialogue{
      display: flex;
      justify-content: flex-start;
      width: 92%;
      margin: 20px;
      img.head-pic{
        height: 34px;
        width: 34px;
        border-radius: 2px;
      }
      em{
        display: block;
        width: 0;
        height: 0;
        margin-top: 8px;
      }
      div{
        display: inline-block;
        background-color: @chat-bg-color;
        border-radius: 3px;
        padding: 4px;
        max-width: 260px;
        height: auto;
        word-wrap: break-word;
        color: #333;
        font-family: "Microsoft YaHei";
        line-height: 1.8;
      }
      span.time{
        display: inline-block;
        background-color: rgba(218,218,218,0.5);
        text-align: center;
        font-size: 12px;
        color: #fff;
        padding: 2px 4px;
        border-radius: 1px;
        height: 16px;
        margin: auto 10px;
      }
      &.ans{
        flex-flow: row nowrap;
        em{
          .triangle-row(right,#fff,6px);
        }
        div{
          background-color: #fff;
          .new-list{
            width: 100%;
            padding-left: 0px;
            li{
              display: flex;
              flex-flow: row nowrap;
              justify-content: flex-start;
              width: 100%;
              margin: 10px 0;
              img{
                display: block;
                float: left;
                width: 120px;
                height: 90px;
              }
              div{
                height: 100%;
                h3{
                  display: inline-block;
                  font-size: 12px;
                  margin-top: 0;
                }
                span{
                  font-size: 12px;
                  float: right;
                }
              }
            }
          }
        }
      }
      &.ask{
        flex-flow: row-reverse nowrap;
        em{
          .triangle-row(left,@chat-bg-color,6px);
        }
      }
    }
  }
  .txt-box{
    position: relative;
    width: 100%;
    height: 112px;
    overflow: hidden;
    textarea{
      width: 100%;
      height: 100%;
      border: none;
      resize: none;
      text-indent: 26px;
      font-size: 14px;
      &:focus{
        outline: none;
      }
    }
    button{
      position: absolute;
      bottom: 10px;
      z-index: 999;
      right: 20px;
      display: block;
      width: 70px;
      height: 25px;
      background-color: rgb(18,150,17);
      color: #fff;
      line-height: 25px;
      font-size: 12px;
      text-align: center;
      border: none;
    }
  }
  .nav-box{
    height: 36px;
    width: 100%;
    background: url("../img/nav-bar.png") no-repeat;
  }
}
/*weather*/
